<template>
    <div class="header">
       <div class="header-left">
          <div class="iconfont back-icon">
              &#xe624;
          </div>
       </div>
       <div class="header-input">
           <span class="iconfont">
             &#xe632;
           </span>
           大锤提示你请输入游玩主题
       </div>
       <router-link to="/city" >
          <div class="header-right">
                {{this.city}}
                <span class="iconfont  arrow-icon">
                &#xe64a;
                </span>
          </div>
      </router-link>
    </div>
</template>
<script>
import { mapState } from 'vuex'
export default{
  name: 'HomeHeader',
  computed: {
    ...mapState(['city'])
  }
}
</script>
<style lang="stylus" scoped>
/* scoped设置此属性组件之间样式不会互相影响 */
    @import '~styles/varibles.styl'
    .header
      display flex
      line-height $headerHeight
      background $bgColor
      color #fff
      .header-left
        width .64rem
        float left
        .back-icon
          text-align center
          font-size .4rem
      .header-input
        padding-left .2rem
        flex 1
        height .62rem
        background #ffffff
        border-radius .1rem
        margin-top .12rem
        line-height .62rem
        margin-left .2rem
        color #ccc
      .header-right
        min-width 1.04rem
        padding .1rem
        float right
        text-align center
        color #fff
        .arrow-icon
          margin-left -.04rem
          font-size .25rem
</style>
